$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'sys/bpunchclockarticleinfo/list',
        datatype: "json",
        colModel: [
            {
                label: '序号',
                name: 'id',
                index: 'id',
                align: "center",
                width: 40,
                key: true,
                formatter: function (value, options, rowData) {
                    return "<a onclick=vm.editInfo(" + value + ")>" + value + "</a>";
                }
            },
            {label: '标题', name: 'clockArticleTitle', index: 'clock_article_title', align: "center", width: 140},
            {
                label: '顶图',
                name: 'clockArticleImgUrl',
                index: 'clock_article_img_url',
                align: "center",
                width: 60,
                sortable: false,
                editable: false,
                formatter: function (value, options, rowData) {
                    var url = "https://lktvtool.oss-cn-shenzhen.aliyuncs.com/icon/236A5FF0-52DE-4644-B66C-E9555C97693D.png";
                    if (value == null || value == "") {
                        return "<img src='" + url + "' width='60'/>";
                    } else {
                        return "<img src='" + value + "' width='60'/>";
                    }
                }
            },
            {
                label: '缩略图',
                name: 'clockArticleThumbnailUrl',
                index: 'clock_article_thumbnail_url',
                align: "center",
                width: 60,
                sortable: false,
                editable: false,
                formatter: function (value, options, rowData) {
                    var url = "https://lktvtool.oss-cn-shenzhen.aliyuncs.com/icon/236A5FF0-52DE-4644-B66C-E9555C97693D.png";
                    if (value == null || value == "") {
                        return "<img src='" + url + "' width='40'/>";
                    } else {
                        return "<img src='" + value + "' width='40'/>";
                    }
                }
            },
            {label: '内容', name: 'clockArticleContent', index: 'clock_article_content', align: "center", width: 160},
            {
                label: '音频',
                name: 'clockArticleAudioUrl',
                index: 'clock_article_audio_url',
                align: "center",
                width: 160,
                sortable: false,
                editable: false,
                formatter: function (value, options, rowData) {
                    var url = "https://lktvtool.oss-cn-shenzhen.aliyuncs.com/icon/236A5FF0-52DE-4644-B66C-E9555C97693D.png";
                    if (value == null || value == "") {
                        return "<img src='" + url + "' width='40'/>";
                    } else {
                        let content = "";
                        content += "<audio src=\"";
                        content += value;
                        content += "\" controls=\"controls\"";
                        content += "id=\"clockArticleAudioUrl\"";
                        content += "style=\"display: inline\" alt=\"打卡文章音频URL\">您的浏览器不支持 audio 标签。";
                        content += "</audio>";
                        return content;
                    }
                }
            },
            {
                label: '类型',
                name: 'clockArticleTimeType',
                index: 'clock_article_time_type',
                align: "center",
                width: 50,
                formatter: function (value, options, rowData) {
                    let content = "";
                    if (value === 1) {
                        content = "<p>" + '早安打卡' + "</>";
                    } else if ((value === 2)) {
                        content = "<p>" + '晚安打卡' + "</>";
                    }
                    return content;
                }
            },
            {label: '打卡次数', name: 'clockArticleCount', index: 'clock_article_count', align: "center", width: 50},
            {
                label: '状态',
                name: 'clockArticleStatus',
                index: 'clock_article_status',
                align: "center",
                width: 40,
                formatter: function (value, options, rowData) {
                    let content = "";
                    if (value === 0) {
                        content = "<p>" + '删除' + "</>";
                    } else if ((value === 1)) {
                        content = "<p>" + '正常' + "</>";
                    }
                    return content;
                }
            },
            {label: '所属时间', name: 'clockArticleTime', index: 'clock_article_time', align: "center", width: 120},
            {label: '操作', name: '', index: '', align: "center", width: 120, formatter (value, options, rowData) {
                    let id = rowData["id"];
                    return "<a style='text-align: center' class='btn btn-primary' onclick='vm.loadPunchArticleDetail("+id+")'>详情</a>";
                }},
        ],
        viewrecords: true,
        height: 520,
        rowNum: 30,
        rowList: [15, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});

            // 获取所有audios
            var audios = document.getElementsByTagName("audio");

            // 暂停函数
            function pauseAll() {
                var self = this;
                [].forEach.call(audios, function (i) {
                    // 将audios中其他的audio全部暂停
                    i !== self && i.pause();
                })
            }

            // 给play事件绑定暂停函数
            [].forEach.call(audios, function (i) {
                i.addEventListener("play", pauseAll.bind(i));
            })
        }
    });

    vm.initSizeDetail();
    $(window).resize(function(){
        vm.resizeDetail("jqGridDetail");
    });
});

var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        bPunchClockArticleInfo: {},
        width: null,
        height: null,
        layero: null
    },
    methods: {
        query: function () {
            vm.reload();
        },
        add: function () {
            vm.showList = false;
            vm.title = "新增";
            vm.bPunchClockArticleInfo = {};
        },
        update: function (event) {
            var id = getSelectedRow();
            if (id == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(id)
        },
        saveOrUpdate: function (event) {
            var url = vm.bPunchClockArticleInfo.id == null ? "sys/bpunchclockarticleinfo/save" : "sys/bpunchclockarticleinfo/update";
            $.ajax({
                type: "POST",
                url: baseURL + url,
                contentType: "application/json",
                data: JSON.stringify(vm.bPunchClockArticleInfo),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        del: function (event) {
            var ids = getSelectedRows();
            if (ids == null) {
                return;
            }

            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: baseURL + "sys/bpunchclockarticleinfo/delete",
                    contentType: "application/json",
                    data: JSON.stringify(ids),
                    success: function (r) {
                        if (r.code == 0) {
                            alert('操作成功', function (index) {
                                $("#jqGrid").trigger("reloadGrid");
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        getInfo: function (id) {
            $.get(baseURL + "sys/bpunchclockarticleinfo/info/" + id, function (r) {
                vm.bPunchClockArticleInfo = r.bPunchClockArticleInfo;
            });
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        },
        editInfo: function (ids, event) {
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(ids)
        },
        loadPunchArticleDetail: function (id) {
            // 1、参数校验
            if (id == null) {
                return;
            }
            // 2、清空数据
            $("#jqGridDetail").jqGrid("clearGridData")
            // 3、加载数据
            vm.loadGridPunchArticleDetail(id);
            // 4、弹窗
            vm.layerOpen(id);
            // 5、重新加载数据
            vm.reloadGridPunchArticleDetail(id);
        },
        layerOpen: function (id) {
            layer.open({
                type: 1,
                title: ['打卡明细(文章编号'+id+')', 'font-weight: bold'],
                area: [vm.width+'px', vm.height+'px'],
                shadeClose: true,
                scrollbar: false,
                content: $('#layerDetail'),
                success: function (layero, index) {
                    vm.layero = layero;
                }
            });
        },
        loadGridPunchArticleDetail: function(id) {
            $("#jqGridDetail").jqGrid({
                url: baseURL + 'sys/bpunchclockarticleinfo/detail',
                datatype: "json",
                colModel: [
                    {label: '用户编号', name: 'userId', index: 'user_id', align: "center", width: 80},
                    {label: '用户昵称', name: 'userName', index: 'user_name', align: "center", width: 120},
                    //{label: '文章编号', name: 'clockArticleId', index: 'clock_article_id', align: "center", width: 80},
                    //{label: '文章标题', name: 'articleTitle', index: 'clock_article_title', align: "center", width: 120},
                    { label: '打卡时间', name: 'createTime', index: 'create_time',align: "center", width: 120 },
                ],
                viewrecords: true,
                height: $(window).height() - 136,
                rowNum: 15,
                rowList: [15, 30, 50],
                rownumbers: true,
                rownumWidth: 25,
                autowidth: true,
                //multiselect: true,
                pager: "#jqGridPagerDetail",
                jsonReader: {
                    root: "page.list",
                    page: "page.currPage",
                    total: "page.totalPage",
                    records: "page.totalCount"
                },
                prmNames: {
                    page: "page",
                    rows: "limit",
                    order: "order"
                },
                postData: {'id': id},
                gridComplete: function () {
                    vm.setGridSize("jqGridDetail");
                    //隐藏grid底部滚动条
                    $("#jqGridDetail").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                }
            });
        },
        reloadGridPunchArticleDetail: function (id) {
            let page = $("#jqGridDetail").jqGrid('getGridParam', 'page');
            $("#jqGridDetail").jqGrid('setGridParam',{
                postData: {'id': id},
                page: page
            }).trigger("reloadGrid");
        },
        initSizeDetail: function() {
            // 初始化宽高值，用于定义弹窗的大小
            vm.width = $(window).width() - 600;
            vm.height = $(window).height() - 120;
        },
        resizeDetail: function (selector) {
            vm.initSizeDetail();

            // layer 自适应
            vm.layero.css("width", vm.width + "px");
            vm.layero.css("height", vm.height + "px");
            vm.setGridSize(selector);
        },
        setGridSize: function (selector) {
            $("#"+selector).jqGrid("setGridWidth", vm.width - 18);
            $("#"+selector).jqGrid("setGridHeight", vm.height - 124);
        }
    }
});
